<!--新建hive表页面-->
<template>
  <el-dialog :visible.sync="open" width="1000px" :close-on-click-modal="false" append-to-body>
  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px" class="demo-ruleForm" >
<!--    <el-col :span="11">-->
<!--    <el-row :gutter="24">-->
<!--      <el-col :span="8">-->
    <el-form-item label="表英文名：" prop="tableName">
      <el-input v-model="ruleForm.tableName" style="width: 300px" :disabled="false"></el-input>
    </el-form-item>
<!--    </el-col>-->
<!--      <el-col :span="8">-->
    <el-form-item label="表描述：" prop="tableDisc">
      <el-input v-model="ruleForm.tableDisc" style="width: 300px"></el-input>
    </el-form-item>
<!--      </el-col>-->
<!--      <el-col :span="8">-->
    <el-form-item label="库名：" prop="schemaName">
      <el-select v-model="ruleForm.schemaName" placeholder="请选择库名" style="width: 300px">
        <el-option label="gmall" value="gmall"></el-option>
        <el-option label="gmall-shcedule" value="gmall-shcedule"></el-option>
      </el-select>
    </el-form-item>
<!--      </el-col>-->
<!--      <el-col :span="8">-->
    <el-form-item label="技术负责人：" prop="tecOwnerUserId">
      <el-input v-model="ruleForm.tecOwnerUserId" style="width: 300px"></el-input>
    </el-form-item>
<!--      </el-col>-->
<!--      <el-col :span="8">-->
    <el-form-item label="业务负责人：" prop="busiOwnerUserId">
      <el-input v-model="ruleForm.busiOwnerUserId" style="width: 300px"></el-input>
    </el-form-item>
<!--      </el-col>-->
<!--      <el-col :span="8">-->
    <el-form-item label="负责部门：" prop="deptId">
<!--      <el-select v-model="ruleForm.deptId" placeholder="请选择活动区域">-->
<!--        <el-option label="区域一" value="1"></el-option>-->
<!--        <el-option label="区域二" value="2"></el-option>-->
<!--      </el-select>-->
      <el-input v-model="ruleForm.deptId" style="width: 300px"></el-input>
    </el-form-item>
<!--      </el-col>-->
<!--      <el-col :span="8">-->
    <el-form-item label="生命周期：" prop="lifecycleDays">
      <el-input v-model="ruleForm.lifecycleDays" style="width: 300px"></el-input>
    </el-form-item>
<!--      </el-col>-->
<!--      <el-col :span="8">-->
    <el-form-item label="安全级别：" prop="securityLevel">
      <el-input v-model="ruleForm.securityLevel" style="width: 300px"></el-input>
    </el-form-item>
<!--      </el-col>-->
<!--      <el-col :span="8">-->
    <el-form-item label="所在层级：" prop="dwLevel">
      <el-select v-model="ruleForm.dwLevel" placeholder="请选择活动区域" style="width: 300px">
        <el-option label="ODS" value="ODS"></el-option>
        <el-option label="DWD" value="DWD"></el-option>
        <el-option label="DIM" value="DIM"></el-option>
        <el-option label="DWS" value="DWS"></el-option>
        <el-option label="ADS" value="ADS"></el-option>
      </el-select>
<!--      <el-input v-model="ruleForm.dwLevel"></el-input>-->
    </el-form-item>
<!--      </el-col>-->
<!--      <el-col :span="24">-->
      <el-form-item label="SQL：" prop="hiveSql">
        <el-input type="textarea"
                  :rows="15"
                  placeholder="请输入内容，不要分号结尾"
                  v-model="ruleForm.hiveSql"></el-input>
      </el-form-item>
<!--      </el-col>-->
    <el-form-item>
      <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
      <el-button @click="resetForm('ruleForm')">重置</el-button>
    </el-form-item>
<!--    </el-row>-->
<!--    </el-row>-->
      </el-form>
<!--      </el-col>-->
  </el-dialog>
</template>
<script>
import newTableApi from '@/api/assets/newTable'
    export default {
      data() {
        return {
          open: false,
          ruleForm: {
            tableName: '',
            tableDisc: '',
            schemaName: '',
            tecOwnerUserId: '',
            busiOwnerUserId: '',
            deptId: '',
            lifecycleDays: '',
            securityLevel:'',
            dwLevel:'',
            hiveSql:''
          },
          rules: {
            tableName: [
              { required: true, message: '请输入表英文名', trigger: 'blur' }
            ],
            tableDisc: [
              { required: true, message: '请输入表描述', trigger: 'blur' }
            ],
            schemaName: [
              { required: true, message: '请选择库名', trigger: 'change' }
            ],
            tecOwnerUserId: [
              { required: true, message: '请输入技术负责人', trigger: 'blur' }
            ],
            busiOwnerUserId: [
              { required: true, message: '请输入业务负责人', trigger: 'blur' }
            ],
            deptId: [
              { required: true, message: '请输入负责部门', trigger: 'blur' }
            ],
            lifecycleDays: [
              { required: true, message: '请输入生命周期', trigger: 'blur' }
            ],
            securityLevel: [
              { required: true, message: '请输入安全级别', trigger: 'blur' }
            ],
            dwLevel: [
              { required: true, message: '请选择所在层级', trigger: 'change' }
            ],
            hiveSql: [
              { required: true, message: '请输入SQL', trigger: 'blur' }
            ]
          }
        };
      },
      methods: {
        init(){
          this.open = true;
        },
        submitForm(formName) {
          this.$refs[formName].validate((valid) => {
            if (valid) {
              newTableApi.createTable(this.ruleForm).then(response => {
                console.log("res-----"+response.status)
                if (response.code == 200) {
                  this.$notify({
                    title: '成功',
                    message: '创建成功',
                    type: 'success',
                    duration: 2000
                  })
                } else
                  this.$notify({
                    title: '失败',
                    message: '创建失败',
                    type: 'fail'
                  })

              })
            } else {
              console.log('error submit!!');
              return false;
            }
          });

          // this.$refs[formName].validate((valid) => {
          //   if (valid) {
          //     alert('submit!');
          //   } else {
          //     console.log('error submit!!');
          //     return false;
          //   }
          // });
        },
        resetForm(formName) {
          this.$refs[formName].resetFields();
        }
      }
    }
  </script>
